<template>
	<view class="">
	<view class="top">
		<!-- #ifdef MP || APP-PLUS -->
		<view class="sys-head">
			<view class="sys-bar" :style="{height:sysHeight}"></view>
			<!-- #ifdef MP -->
			<view class="sys-title">
				<navigator style="display: flex;align-items: center;justify-content: center;" open-type="navigateBack" delta='1'><image  src="../../../static/images/backnav.png" mode=""></image></navigator><text>申请开票</text>
				</view>
			<!-- #endif -->
			<view class="bg"></view>
		</view>
		<!-- #endif -->
	</view>
	<scroll-view scroll-y="true" :style="{height:scrollBoxHeight}" id="scrollBox" >
		
		
	<view class="mainbox">
		<view class="iptbox">
			<view class="ipttitle">
				发票类型
			</view>
			<view class="iptright" @click="callType">
				<view class="iptcon">
					{{type==1?'普通电子发票':'增值税发票'}}
				</view>
				<text class="iconfont icon-jiantou" ></text>
			</view>
		</view>
		<view class="iptbox">
			<view class="ipttitle">
				发票金额
			</view>
			<view class="iptright">
				<view class="iptcon price">
					￥{{amount}}
				</view>
				<!-- <text class="iconfont icon-jiantou"></text> -->
			</view>
		</view>
		<view class="iptbox">
			<view class="ipttitle">
				发票类型
			</view>
			<view class="iptright">
				<view class="iptcon typecon">
					明细
				</view>
				
			</view>
		</view>
		<view class="iptbox" @tap="goInvoice">
			<view class="ipttitle">
				发票抬头
			</view>
			<view class="iptright">
				<view class="iptcon">
					{{invTitle}}
				</view>
				<text class="iconfont icon-jiantou"></text>
			</view>
		</view>
		<view class="iptbox" style="background-color:#F2F2F2;" v-if="type==1 && email">
			<view class="ipttitle">
				电子邮箱
			</view>
			<view class="iptright">
				<view class="iptcon">
					<input  type="text" disabled placeholder="用于发送电子发票" v-model="email" />
				</view>
				<!-- <text class="iconfont icon-jiantou"></text> -->
			</view>
		</view>
		<view class="iptbox" v-if="type==2">
			<view class="ipttitle">
				联系电话
			</view>
			<view class="iptright">
				<view class="iptcon">
					<input type="text" disabled  placeholder="用于发票快递" v-model="drawer_phone" />
				</view>
				<!-- <text class="iconfont icon-jiantou"></text> -->
			</view>
		</view>
		<view class="iptbox" v-if="type==2">
			<view class="ipttitle">
				收货地址
			</view>
			<view class="iptright">
				<view class="iptcon">
					<input type="text" disabled placeholder="用于发票快递" v-model="address" />
				</view>
				<!-- <text class="iconfont icon-jiantou"></text> -->
			</view>
		</view>
		<view class="iptbox" >
			<view class="ipttitle">
				备注
			</view>
			<view class="iptright">
				<view class="iptcon">
					<input type="text" placeholder="用于发票快递" v-model="remark" />
				</view>
				<!-- <text class="iconfont icon-jiantou"></text> -->
			</view>
		</view>
		<view class="btnkp" @click="conbtn">
			申请开票
		</view>
		<view class="shuoming" @click="isshowshouming = true">
			开票说明
		</view>
		<view :class="{ mask: popupType }"></view>
		<view class="popup" :class="{ on: popupType }">
			<view class="title">发票类型选择<text class="iconfont icon-guanbi" @click="closeType"></text></view>
			<scroll-view scroll-y="true">
				<radio-group name="invoice-type" @change="changeType">
					<template v-for="item in invoiceTypeList">
						<label v-if="item.value === '1' || item.value === '2' && specialInvoice" :key="item.type" class="acea-row row-middle">
							<view class="text">
								<view>{{ item.name }}</view>
								<view class="info">{{ item.info }}</view>
							</view>
							<radio :value="item.value" :checked="item.value === type" />
						</label>
					</template>
				</radio-group>
			</scroll-view>
		</view>
		<invoice-picker :inv-show="invShow" :inv-list="invList" :inv-checked="invChecked" :is-special="special_invoice"
			:url-query="urlQuery" @inv-close="invClose" @inv-change="invChange" @inv-cancel="invCancel" :invno="false">
		</invoice-picker>
	</view>
	</scroll-view>
	<view class="kaishuo" v-if="isshowshouming">
		<view class="shuombox">
			<view class="title">
				开票说明
			</view>
			<view class="shuocon">
				{{shuoming}}
			</view>
			<view class="iknow" @click="isshowshouming = false">
				我知道了
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	import {
		invoiceList,orderMake_up_invoices,invoicegetOrderPrice,invoiceconfig
	} from '@/api/user.js';
	import invoicePicker from '@/components/invoicePicker';
	
	export default {
		components: {
			invoicePicker
		},
		data() {
			return {
				popupType: false,
				invoiceTypeList: [{
						name: '普通电子发票',
						value: '1',
						info: '电子发票已邮箱的形式发送'
					},
					{
						name: '增值税专用发票',
						value: '2',
						info: '纸质发票开出后将以邮寄形式交付'
					}
				],
				specialInvoice: true,
				header_type: '1', // 抬头类型1: 个人2： 企业
				type: '1', // 发票类型1：普通2：专用
				
				
				invTitle: '选择抬头',
				special_invoice: true,
				invoice_func: false,
				header_type: '',
				invShow: false,
				invList: [],
				invChecked: '',
				urlQuery: 'from=invoice_confirm',
				pay_close: false,
				noCoupon: 0,
				sysHeight: sysHeight,
				scrollBoxHeight:0,
				order_ids:'', // 需要开发票的id
				amount:0,
				drawer_phone:'',
				address:'',
				email:'',
				remark:'',
				shuoming:'',
				isshowshouming:false
			}
		},
		onLoad(ops) {
			console.log(ops)
			this.order_ids = ops.ids
			this.invoicegetOrderPrice()
			uni.setNavigationBarColor({
				 frontColor: '#ffffff',
				 backgroundColor: '#C7ED67'
			})
			this.getinvoiceconfig()
		},
		methods: {
			// 获取发票说明
			async getinvoiceconfig(){
				var res = await invoiceconfig()
				console.log(res,234)
				if(res.data.special_invoice_status==0){
					this.invoiceTypeList =  [{
						name: '普通电子发票',
						value: '1',
						info: '电子发票已邮箱的形式发送'
					}]
				}
				
				this.shuoming = res.data.invoice_description
			},
			// 申请开票
			async conbtn(){
				// invoice_id	是	int	抬头ID
				// order_ids	是	int	开票订单，多个”,”分割
				// drawer_phone	否	string	联系电话
				// address	否	string	邮寄地址
				// email	否	string	电子邮箱地址
				// remark
				
				var {type,invChecked,email,drawer_phone,address,remark} = this
				if(!invChecked){
					return uni.showToast({
						title:"请选择发票抬头",
						icon:"none"
					})
				}
				var data = {}
				if(type==1){
					data.invoice_id = invChecked
					data.email = email
					data.remark = remark
				}else{
					data.invoice_id = invChecked
					data.phone = drawer_phone
					data.address = address
					data.remark = remark
				}
				data.order_ids = this.order_ids
				var res = await orderMake_up_invoices(data)
				console.log(res)
				if(res.status===200){
					uni.showToast({
						title:"开票申请提交成功",
						icon:"none",
						mask:true,
						success:()=>{
							setTimeout(()=>{
								uni.navigateBack({
									delta:1
								})
							},1500)
						}
					})
					
				}else if(res.status===400){
					uni.showToast({
						title:res.msg,
						icon:"none",
					})
				}
			},
			async invoicegetOrderPrice(){
				var data = {
					order_ids:this.order_ids
				}
				console.log(data,324324)
				var res = await invoicegetOrderPrice(data)
				console.log(res)
				this.amount = res.data.amount
			},
			// 不开发票
			invCancel() {
				// this.invChecked = '';
				// this.invTitle = '选择抬头';
				this.invShow = false;
			},
			// 选择发票
			invChange(id) {
				console.log(234)
				this.invChecked = id;
				this.invShow = false;
				const result = this.invList.find(item => item.id === id);
				console.log(result,1234)
				let name = '';
				name += result.header_type === 1 ? '个人' : '企业';
				name += result.type === 1 ? '普通' : '专用';
				name += '发票';
				if(result.type===1){
					this.email = result.email
					this.drawer_phone = result.drawer_phone
				}else{
					this.address = result.address
					this.drawer_phone = result.drawer_phone
				}
				this.invTitle = result.name;
			},
			onReady() {
				let self = this
				// #ifdef MP
				let info = uni.createSelectorQuery().select(".sys-head");
				info.boundingClientRect(function(data) { //data - 各种参数
					self.mpHeight = data.height
				}).exec()
				// #endif
				
				var systemHeight = uni.getSystemInfoSync().windowHeight
				uni.createSelectorQuery().select('#scrollBox').boundingClientRect((rect) => {
					var top = systemHeight - rect.top
					this.scrollBoxHeight = top + 'px'
				}).exec()
			},
			// 关闭发票
			invClose() {
				this.invShow = false;
				// this.getInvoiceList()
			},
			getInvoiceList() {
				uni.showLoading({
					title: '正在加载…'
				})
				var data = {
					type:this.type
				}
				invoiceList(data).then(res => {
					
					uni.hideLoading();
					this.invList = res.data.map(item => {
						item.id = item.id.toString();
						return item;
					});
					const result = this.invList.find(item => item.id == this.invChecked);
					console.log(234,"切换发票类型")
					// if (result) {
					// 	let name = '';
					// 	name += result.header_type === 1 ? '个人' : '企业';
					// 	name += result.type === 1 ? '普通' : '专用';
					// 	name += '发票';
					// 	this.invTitle = name;
					// }
				}).catch(err => {
					uni.showToast({
						title: err,
						icon: 'none'
					});
				});
			},
			/**
			 * 开发票
			 */
			goInvoice: function() {
				this.getInvoiceList()
				this.invShow = true;
				// this.urlQuery =
				// 	`new=${this.news}&cartId=${this.cartId}&pinkId=${this.pinkId}&couponId=${this.couponId}&addressId=${this.addressId}&specialInvoice=${this.special_invoice}&couponTitle=${this.couponTitle}`;
			},
			
			// 调起发票类型弹窗
			callType() {
				this.popupType = true;
			},
			// 选择发票类型
			changeType(e) {
				const type = e.detail.value,
					invoiceItem = this.invoiceTypeList.find(item => item.value === type);
				if (type === '2' && this.header_type === '1') {
					this.header_type = '2';
				}
				this.typeName = invoiceItem.name;
				this.type = type;
				this.popupType = false;
				console.log('发票类型切换')
				// 切换类型 重置数据 
				this.invChecked=''
				this.invTitle='选择抬头'
				this.email=''
				this.drawer_phone=''
				this.address=''
				this.remark=''
			},
			// 关闭发票弹窗
			closeType() {
				this.popupType = false;
			},
			// 选择抬头类型
			changeTitleType(e) {
				this.header_type = e.detail.value;
				this.type = '1';
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sys-head {
		position: relative;
		width: 100%;
		// background: linear-gradient(90deg, $bg-star1 0%, $bg-end1 100%);
	
		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: url("~@/static/images/home_bg.png") no-repeat;
			background-size: 100% 100%;
			background-position: left bottom;
		}
	
		.sys-title {
			z-index: 10;
			position: relative;
			height: 43px;
			text-align: center;
			line-height: 43px;
			font-size: 36rpx;
			color: #FFFFFF;
			display:flex;
			align-items: center;
			image{
				width:45rpx;
				height:38rpx;
				margin-right:18rpx;
				margin-left:30rpx;
			}
		}
	}
	.iconfont {
		color:#999;
	}
	.mainbox{
		width:100vw;
		height:100vh;
		background-color:#fff;
		padding:0 40rpx;
		box-sizing: border-box;
		.iptbox{
			padding:30rpx 0;
			border-bottom:2rpx solid #ddd;
			display:flex;
			justify-content: space-between;
			align-items: center;
			.ipttitle{
				font-size: 28rpx;
				font-weight: 300;
				color: #333333;
			}
			.iptright{
				width:460rpx;
				display:flex;
				align-items: center;
				justify-content: space-between;
				.iptcon{
					font-size: 28rpx;
					font-weight: 300;
					color: #666666;
					input{
						width:430rpx;
					}
				}
				.iptcon.price{
					font-size: 28rpx;
					font-weight: 300;
					color: #D72525;
				}
				.iptcon.typecon{
					font-size: 28rpx;
					font-weight: 300;
					color: #333333;
				}
			}
		}
	}
	.btnkp{
		margin:auto;
		margin-top:140rpx;
		margin-bottom:56rpx;
		width: 391rpx;
		height: 72rpx;
		line-height:72rpx;
		text-align:center;
		background: #95C51B;
		border-radius: 100rpx;
		font-size: 30rpx;
		font-family: SourceHanSansCN;
		font-weight: 400;
		color: #FFFFFF;
		
	}
	.shuoming{
		color:#AAAAAA;
		font-size:28rpx;
		text-align:center;
		border-bottom:1px solid #CBCBCE;
		width:120rpx;
		margin:auto;	
	}
	
	
	
	.popup {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 99;
		width: 100%;
		padding-bottom: 100rpx;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		background-color: #F5F5F5;
		overflow: hidden;
		transform: translateY(100%);
		transition: 0.3s;
	}
	
	.popup.on {
		transform: translateY(0);
	}
	
	.popup .title {
		position: relative;
		height: 137rpx;
		font-size: 32rpx;
		line-height: 137rpx;
		text-align: center;
	}
	
	.popup scroll-view {
		height: 466rpx;
		padding-right: 30rpx;
		padding-left: 30rpx;
		box-sizing: border-box;
	}
	
	.popup label {
		padding: 35rpx 30rpx;
		border-radius: 16rpx;
		margin-bottom: 20rpx; 
		background-color: #FFFFFF;
	}
	
	.popup .text {
		flex: 1;
		min-width: 0;
		font-size: 28rpx;
		color: #282828;
	}
	
	.popup .info {
		margin-top: 10rpx;
		font-size: 22rpx;
		color: #909090;
	}
	
	.popup .icon-guanbi {
		position: absolute;
		top: 50%;
		right: 30rpx;
		z-index: 2;
		transform: translateY(-50%);
		font-size: 30rpx;
		color: #707070;
		cursor: pointer;
	}
	
	.popup .text .acea-row {
		display: inline-flex;
		max-width: 100%;
	}
	
	.popup .name {
		flex: 1;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 30rpx;
	}
	
	.popup .label {
		width: 56rpx;
		height: 28rpx;
		border: 1rpx solid #E93323;
		margin-left: 18rpx;
		font-size: 20rpx;
		line-height: 26rpx;
		text-align: center;
		color: #E93323;
	}
	
	.popup .type {
		width: 124rpx;
		height: 42rpx;
		margin-top: 14rpx;
		background-color: #FCF0E0;
		font-size: 24rpx;
		line-height: 42rpx;
		text-align: center;
		color: #D67300;
	}
	
	.popup .type.special {
		background-color: #FDE9E7;
		color: #E93323;
	}
	
	
	.kaishuo{
		position:fixed;
		z-index:999;
		top:0;
		left:0;
		width:100vw;
		height:100vh;
		background-color:rgba(0,0,0,.5);
		display:flex;
		align-items: center;
		justify-content: center;
		
		.shuombox{
			background-color:#fff;
			width:80%;
			min-height:300rpx;
			box-sizing: border-box;
			padding:0 20rpx;
			border-radius:10rpx;
			.title{
				text-align: center;
				padding:30rpx 0;
				font-size:38rpx;
			}
			.shuocon{
				font-size:32rpx;
				overflow-y:auto;
				min-height:300rpx;
				max-height:650rpx;
				padding:10rpx 10rpx 20rpx;
			}
			.iknow{
				font-weight: bold;
				background-color: #F59A23;
				width: 207rpx;
				height: 77rpx;
				line-height: 77rpx;
				background: #95C51B;
				border-radius: 39rpx;
				text-align: center;
				font-size: 30rpx;
				font-weight: 400;
				color: #FFFFFF;
				margin-right: 30rpx;
				margin:30rpx auto;
				
			}
		}
	}
</style>
